<template>
    <div class="yemian">
        <div class="left">
            <div class="leftheader">
                <img :src="require('@/assets/al.png')" alt="al" class="al">
                <div class="leftitle">AI模型</div>
            </div>
            <div class="leftbody">
                <div class="new">
                    <img :src="require('@/assets/jiahao.png')" alt="jiahao" class="img">
                    <div class="text1">新对话</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/sousuo.png')" alt="al" class="img">
                    <div class="text">AI搜索</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/xiezuo.png')" alt="xiezuo" class="img">
                    <div class="text">帮我写作</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/tuxiang.png')" alt="tuxiang" class="img">
                    <div class="text">图像生成</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/biancheng.png')" alt="bianchang" class="img">
                    <div class="text">AI编程</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/wenjian.png')" alt="wenjian" class="img">
                    <div class="text">本地文件回答</div>
                </div>
                <div class="choice">
                    <img :src="require('@/assets/gengduo.png')" alt="gengduo" class="img">
                    <div class="text">更多</div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="rightheader">
                <select v-model="selectedOption" @change="handleChange" class="country-code">
                    <option value="setting">设置</option>
                    <option value="logout">退出登录</option>
                    <option value="changePassword">修改密码</option>
                </select>
                <img :src="require('@/assets/touxiang.jpg')" alt="touxiang" class="img3">
            </div>
            <div class="rightbody">
                <div clas="bodytltle">
                    <div class="title1">
                        <h1>吾皇万岁！我是DeepSeek，很高兴见到你！</h1>
                    </div>
                    <div class="title2">
                        <p>我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~</p>
                    </div>
                </div>
                <div class="container" tabindex="0">
                    <!-- 多行输入框 -->
                    <textarea v-model="content" class="textarea" placeholder="给DeepSeek发送消息"
                        @input="adjustHeight"></textarea>
                    <div class="other">
                        <div class="otherleft">
                            <div class="logo">
                                <img :src="require('@/assets/sikao.png')" alt="sikao" class="img0">
                                <div class="text0">深度思考(R1)</div>
                            </div>
                            <div class="logo">
                                <img :src="require('@/assets/lianwang.png')" alt="lianwang" class="img0">
                                <div class="text0">联网搜索</div>
                            </div>
                        </div>
                        <div class="otherright">
                            <div class="logo">
                                <img :src="require('@/assets/fujian.png')" alt="fujian" class="img0">
                            </div>
                            <div class="logo">
                                <img :src="require('@/assets/fasong.png')" alt="fasong" class="img0">
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const selectedOption = ref('setting');
import { useRouter } from 'vue-router';

const router = useRouter();

const handleChange = () => {
    if (selectedOption.value) {
        switch (selectedOption.value) {

            case 'logout':
                localStorage.removeItem('token');
                router.push('/Login');
                break;
            case 'changePassword':
                router.push('/Forget');
                break;
        }
        selectedOption.value = '';
    }
};

const content = ref('');
const textareaRef = ref(null);

// 调整输入框高度
const adjustHeight = () => {
    if (textareaRef.value) {
        // 重置高度为自动计算
        textareaRef.value.style.height = 'auto';
        // 取内容实际高度与初始高度（100px）的最大值，确保至少100px
        const minHeight = 100;
        const contentHeight = textareaRef.value.scrollHeight;
        textareaRef.value.style.height = `${Math.max(contentHeight, minHeight)}px`;
    }
};

// 初始化时设置初始高度
onMounted(() => {
    adjustHeight();
});
</script>

<style scoped>
.yemian {
    width: 100%;
    display: flex;
}

.left {
    width: 30%;
    height: 100%;
    flex-direction: column;
    display: flex;
    background-color: #f3f4f6;
}

.leftheader {
    height: 100px;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}

.al {
    width: 40px;
    height: 40px;
    margin-right: 12px;

}

.leftitle {
    line-height: 40px;
    margin-left: 20px;
    font-size: 40px;
    margin: 0;
}

.leftbody {
    height: calc(100% - 100px);
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column;

}

.new {
    cursor: pointer;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
    background-color: #e5ebf7;
}

.text1 {
    margin: 0;
    font-size: 24px;
    line-height: 25px;
    color: #0057ff;
}

.new:hover {
    background-color: #dae4f7;
}

.choice {
    cursor: pointer;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}

.choice:hover {
    background-color: #e9eaec;

}

.img {
    width: 25px;
    height: 25px;
    margin-right: 12px;
    /* 图标与文字的水平间距 */
}

.text {
    margin: 0;
    /* 清除默认 margin */
    font-size: 24px;
    line-height: 25px;
    /* 与文字高度一致，垂直居中更精准 */
}

.right {
    width: 70%;
    height: 100%;
    flex-direction: column;
    display: flex
}

.rightheader {
    height: 100px;
    flex-direction: row-reverse;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
}

.img3 {
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border-radius: 50%;

}

.country-code {
    width: 110px;
    background-color: #f3f6f8;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    height: 48px;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0 10px;
}

.rightbody {
    height: calc(100% - 100px);
    background-color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.bodytltle {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.title1 {
    margin-bottom: 10px;
}

.h1 {
    color: #fff;
    font-size: 30px;
    margin: 0;
}

.title2 {
    margin-top: 10px;
    text-align: center;
    display: flex;
    margin-left: 45px;
}

.p {
    color: #fff;
    font-size: 20px;
    margin: 0;
}

.container {
    /* 容器样式（可选，用于布局） */
    width: 600px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.textarea {

    width: 99%;
    border: none;
    height: 55px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    /* 行高，影响每行高度 */
    resize: none;
    /* 禁止手动拖动改变尺寸 */
    outline: none;
    /* 去掉默认聚焦边框 */

    /* 自动换行核心属性 */
    white-space: pre-wrap;
    /* 保留换行和空格，自动换行 */
    word-wrap: break-word;
    /* 长单词/数字自动拆分 */
}

/* 聚焦时样式 */
.container:focus {
    border-color: #4096ff;
    box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.2);
}

/* 占位符样式 */
.textarea::placeholder {
    color: #999;
    opacity: 1;
}

.other {
    height: 40px;
    width: 99%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.otherleft {
    height: 30px;
    width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;

}

.otherright {
    height: 30px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
}

.img0 {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.text0 {
    font-size: 11px;
    color: #141313;
    margin: 0;
}

.logo:hover {
    background-color: #49c4ea;
    border-radius: 4px;
}
</style>